import { useUpdate } from 'ahooks';
import useStore from "./store";

function ShowPerson() {
  const store = useStore(state => ({
    name: state.name,
    cityName: state.cityName
  }));
  return <div>
    <h1>姓名：{store.name}</h1>
    <h1>所在城市：{store.cityName}</h1>
  </div>
}

function ModifyPerson() {
  const actions = useStore(state => ({
    setPeron: state.setPeron,
    setCityName: state.setCityName,
    reset: state.reset,
    person: state.person
  }));

  const modifyPerson = () => {
    actions.setPeron('李四');
  };

  const modifyCity = () => {
    actions.setCityName('上海市');
  };
  
  return (
    <>
      <button onClick={modifyPerson}>修改人名</button>
      <button onClick={modifyCity}>修改城市</button>
      <button onClick={actions.reset}>重置</button>
    </>
  )
}

const App = () => {
  console.log('render');
  const update = useUpdate();

  return <div>
    <ShowPerson />
    <ModifyPerson />
    <div onClick={update}>强制刷新</div>
  </div>
};

export default App;
